<ul id="scene" class="scene">
  <li class="layer" data-depth="0.00"></li>
  <li class="layer" data-depth="0.10"><div class="background"></div></li>
  <li class="layer" data-depth="0.10"><div class="light orange b phase-3"></div></li>
  <li class="layer" data-depth="0.10"><div class="light purple c phase-4"></div></li>
  <li class="layer" data-depth="0.10"><div class="light orange d phase-5"></div></li>
  <li class="layer" data-depth="0.15"></li>
  <li class="layer" data-depth="0.20"><div class="wave paint depth-20"></div></li>
  <li class="layer" data-depth="0.30"></li>
  <li class="layer" data-depth="0.30"><div class="wave paint depth-30"></div></li>
  <li class="layer" data-depth="0.30"><div class="wave paint depth-30"></div></li>
  <li class="layer" data-depth="0.40"><div class="wave paint depth-40"></div></li>
  <li class="layer" data-depth="0.50"><div class="wave paint depth-50"></div></li>
  <li class="layer" data-depth="0.60"></li>
  <li class="layer" data-depth="0.60"><div class="wave paint depth-60"></div></li>
  <li class="layer" data-depth="0.60"><div class="wave paint depth-60"></div></li>
  <li class="layer" data-depth="0.60"><div class="wave paint depth-60"></div></li>
  <li class="layer" data-depth="0.80"><div class="wave paint depth-80"></div></li>
  <li class="layer" data-depth="1"><div class="wave paint depth-100"></div></li>
</ul>
<section id="about" class="wrapper about accelerate hide">
  <div class="cell accelerate">
    <div class="cables center accelerate">
      <div class="panel accelerate container" style="margin-top: 0px;">
        <header>
          <h1 class="th1"><em>Docker-War</em></h1>
        </header>
        <p class="tp"><%= t("index_board.intro_one") %></p>
        <p class="tp"><%= t("index_board.intro_two") %></p>
        <ul class="links">
          <li><a class="download" href="/register"><%= t("index_board.registration") %></a></li>
          <li><a class="download" href="/home"><%= t("index_board.homepage") %></a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
<button id="toggle" class="toggle i">
  <div class="cross">
    <div class="x"></div>
    <div class="y"></div>
  </div>
</button>

<script>
  // Hide browser menu.
  (function() {
    setTimeout(function(){window.scrollTo(0,0);},0);
  })();

  // Setup FastClick.
  var attachFastClick = Origami.fastclick;
  attachFastClick(document.body);

  // jQuery Selections
  var $html = $('html'),
    $toggle = $('#toggle'),
    $about  = $('#about'),
    $scene  = document.getElementById('scene')

  // Add touch functionality.
  if (Hammer.HAS_TOUCHEVENTS) {
    $container.hammer({drag_lock_to_axis: true});
    _.tap($html, 'a,button,[data-tap]');
  }
  // Add touch or mouse class to html element.
  $html.addClass(Hammer.HAS_TOUCHEVENTS ? 'touch' : 'mouse');
  // Resize handler.
  (resize = function() {
    $scene.style.width = window.innerWidth + 'px';
    $scene.style.height = window.innerHeight + 'px';
  })();
  // Attach window listeners.
  window.onresize = _.debounce(resize, 200);
  window.onscroll = _.debounce(resize, 200);
  function showDetails() {
    $about.removeClass('hide');
    $toggle.removeClass('i');
  }

  function hideDetails() {
    $about.addClass('hide');
    $toggle.addClass('i');
  }

  // Listen for toggle click event.
  $toggle.on('click', function(event) {
    $toggle.hasClass('i') ? showDetails() : hideDetails();
  });

  var parallax = new Parallax($scene);
  parallax.enable();
</script>